/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */
import React, { useEffect, useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import { Space } from 'antd';
import KbRefuseModal from './modal';
import type { smsTmpSearch } from '@/pages/sms/specialTmp/index.d';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import type { ConnectState } from '@/models/connect';
import type { TableColumnsItem } from './index.d';
import { getBlackList, getBrandList } from '@/services/mini/qjPullBlack';
import { useSelector } from 'umi';
import { ProFormText } from '@ant-design/pro-form';
import styles from './index.less';

const Index: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [brandList, setBrandList] = useState<string[]>([]);
  const [recordItem, setRecordItem] = useState<any>({});
  const [visible, setVisible] = useState<boolean>(false);
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const handleRequest = async (params: Record<string, string>) => {
    const { code, data } = await getBlackList(params);
    if (code == 0) {
      return {
        data: data.id ? [data] : [],
      };
    } else {
      return {
        data: [],
      };
    }
  };
  const handleOpenModal = (record: TableColumnsItem) => {
    setRecordItem(record);
    setVisible(true);
  };
  const handleCloseModal = () => {
    setRecordItem({});
    setVisible(false);
  };
  const columns: ProColumns<TableColumnsItem>[] = [
    {
      title: '用户手机号',
      dataIndex: 'mobile',
      align: 'center',
      ellipsis: true,
      hideInTable: true,
      renderFormItem: () => {
        return (
          <ProFormText
            placeholder='请输入手机号'
            name='mobile'
            rules={[{ required: true, message: '请输入手机号' }]}
            fieldProps={{
              width: '100%',
            }}
          />
        );
      },
    },
    {
      title: '用户手机号',
      dataIndex: 'mobile',
      align: 'center',
      width: 100,
      search: false,
      ellipsis: true,
    },
    {
      title: '用户身份',
      dataIndex: 'attribute',
      align: 'center',
      width: 100,
      search: false,
      ellipsis: true,
    },
    {
      title: '团长信息',
      dataIndex: 'regiment_name',
      align: 'center',
      width: 140,
      search: false,
      ellipsis: true,
      render: (_, record) => {
        const { regiment_name, regiment_mobile } = record;
        return (
          <>
            {regiment_name && regiment_mobile ? (
              <Space size={2}>
                {regiment_name} {regiment_mobile}
              </Space>
            ) : (
              '-'
            )}
          </>
        );
      },
    },
    {
      title: '加盟商信息',
      dataIndex: 'league_name',
      align: 'center',
      width: 140,
      search: false,
      ellipsis: true,
      render: (_, record) => {
        const { league_name, league_mobile } = record;
        return (
          <>
            {league_name && league_mobile ? (
              <Space size={2}>
                {league_name} {league_mobile}
              </Space>
            ) : (
              '-'
            )}
          </>
        );
      },
    },
    {
      title: '用户状态',
      dataIndex: 'status',
      align: 'center',
      width: 100,
      search: false,
      ellipsis: true,
      valueEnum: {
        '0': '正常',
        '1': '限制',
      },
    },
    {
      title: '品牌限制',
      dataIndex: 'intercept_brand',
      align: 'center',
      search: false,
      ellipsis: true,
      width: 100,
      render: (_, data) =>
        data.black_brand.length > 0
          ? brandList
              .filter((item: any) => data.black_brand.includes(item.value))
              .map((item1: any) => item1.label)
              .join(',')
          : '-',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      align: 'center',
      width: 100,
      search: false,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'options',
      align: 'center',
      search: false,
      ellipsis: true,
      width: winSize === 'xs' ? 80 : 120,
      fixed: 'right',
      render: (_: any, record: TableColumnsItem) => {
        return <a onClick={handleOpenModal.bind(null, record)}>拉黑</a>;
      },
    },
  ];

  useEffect(() => {
    getBrandList({}).then((data: string[]) => {
      setBrandList(data);
    });
  }, []);
  return (
    <PageContainer className={styles.main} title='全寄寄件黑名单'>
      <DragTable>
        <ProTable<smsTmpSearch>
          className={styles.main}
          actionRef={actionRef}
          rowKey='id'
          request={handleRequest}
          manualRequest
          columns={columns}
          scroll={{ x: 1200 }}
          options={false}
          pagination={false}
          search={{
            collapsed: false,
            collapseRender: () => false,
          }}
        />
      </DragTable>
      <KbRefuseModal
        visible={visible}
        item={recordItem}
        onCancel={handleCloseModal}
        tableRef={actionRef}
      />
    </PageContainer>
  );
};

export default Index;
